<template>
  <div class="user-float-box" @mouseover="mouseover" @mouseout="mouseout" ref="boxWrap">
    <transition enter-active-class="animated fadeIn faster" leave-active-class="animated fadeOut faster">
      <div
        class="user-float"
        ref="userFloat"
        v-if="this.logic.isShow"
        :style="'top:' + this.other.oTop + ';left:' + this.other.oLeft + ';'"
      >
      傳入用戶ID：{{this.userid}}
      </div>
    </transition>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'userFloatBox',
  data () {
    return {
      logic: {
        showtimer: null, // 鼠标划入后的计时器，鼠标移入几秒之后显示悬浮框，提前移除则取消定时器不显示悬浮框
        hidetimer: null, // 鼠标移出后的计时器，……
        isShow: false // 控制悬浮框的显示与否
      },
      other: {
        oTop: 0,
        oLeft: 0
      }
    }
  },
  props: {
    userid: Number
  },
  methods: {
    mouseover () {
      clearTimeout(this.logic.showtimer)
      clearTimeout(this.logic.hidetimer)
      this.logic.showtimer = setTimeout(() => {
        let obj = this.$refs.boxWrap
        let iTop = 0
        let iLeft = 0
        while (obj !== window.document.body && obj !== null) {
          iTop += obj.offsetTop
          iLeft += obj.offsetLeft
          obj = obj.offsetParent
        }
        iTop = iTop - 150 - document.documentElement.scrollTop - 10
        iLeft = iLeft - 150 + this.$refs.boxWrap.offsetWidth / 2

        iTop = iTop < 0 ? iTop + 150 + 20 + this.$refs.boxWrap.offsetHeight : iTop
        iLeft = iLeft < 0 ? 5 : iLeft
        this.other.oTop = iTop + 'px'
        this.other.oLeft = iLeft + 'px'

        this.logic.isShow = true
      }, 800)
    },
    mouseout () {
      clearTimeout(this.logic.showtimer)
      this.logic.hidetimer = setTimeout(() => {
        this.logic.isShow = false
      }, 500)
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.user-float-box
  display inline-block
  .user-float
    width 6rem
    height 3rem
    position fixed
    top 8rem
    box-sizing border-box
    background #fff
    border .02rem solid #eee
    box-shadow 0 2px 6px 0 rgba(0,0,0,.08)
    border-radius .1rem
    z-index 999
</style>
